<template>
    <div class="home-banner">
      <XtxSlider :sliders="bannerList"></XtxSlider>
    </div>
  </template>

<script>
import { getBannerListAPI } from '@/api/home'
import { ref } from 'vue'
export default {
  name: 'HomeBanner',
  setup () {
    // 定义轮播图列表数据
    const bannerList = ref([])
    // 调用获取轮播图列表数据函数
    getBannerList()
    // 获取轮播图列表数据函数
    async function getBannerList () {
      // 发起获取轮播图列表数据请求
      const res = await getBannerListAPI()
      // 保存数据列表
      bannerList.value = res.result
    }

    return {
      bannerList
    }
  }
}
</script>

  <style scoped lang='less'>
  .home-banner {
    width: 1240px;
    height: 500px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 98;
  }
  </style>
